.f {
  position: relative;
  margin: 300px;
}
.f .s {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: -100% center;
  border-radius: 100%;
  transition: all 0.5s;
}
.f .s:nth-child(1) {
  background-color: hsla(15deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(15deg);
  transition-delay: 0.5;
}
.f .s:nth-child(2) {
  background-color: hsla(30deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(30deg);
  transition-delay: 1;
}
.f .s:nth-child(3) {
  background-color: hsla(45deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(45deg);
  transition-delay: 1.5;
}
.f .s:nth-child(4) {
  background-color: hsla(60deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(60deg);
  transition-delay: 2;
}
.f .s:nth-child(5) {
  background-color: hsla(75deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(75deg);
  transition-delay: 2.5;
}
.f .s:nth-child(6) {
  background-color: hsla(90deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(90deg);
  transition-delay: 3;
}
.f .s:nth-child(7) {
  background-color: hsla(105deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(105deg);
  transition-delay: 3.5;
}
.f .s:nth-child(8) {
  background-color: hsla(120deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(120deg);
  transition-delay: 4;
}
.f .s:nth-child(9) {
  background-color: hsla(135deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(135deg);
  transition-delay: 4.5;
}
.f .s:nth-child(10) {
  background-color: hsla(150deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(150deg);
  transition-delay: 5;
}
.f .s:nth-child(11) {
  background-color: hsla(165deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(165deg);
  transition-delay: 5.5;
}
.f .s:nth-child(12) {
  background-color: hsla(180deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(180deg);
  transition-delay: 6;
}
.f .s:nth-child(13) {
  background-color: hsla(195deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(195deg);
  transition-delay: 6.5;
}
.f .s:nth-child(14) {
  background-color: hsla(210deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(210deg);
  transition-delay: 7;
}
.f .s:nth-child(15) {
  background-color: hsla(225deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(225deg);
  transition-delay: 7.5;
}
.f .s:nth-child(16) {
  background-color: hsla(240deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(240deg);
  transition-delay: 8;
}
.f .s:nth-child(17) {
  background-color: hsla(255deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(255deg);
  transition-delay: 8.5;
}
.f .s:nth-child(18) {
  background-color: hsla(270deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(270deg);
  transition-delay: 9;
}
.f .s:nth-child(19) {
  background-color: hsla(285deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(285deg);
  transition-delay: 9.5;
}
.f .s:nth-child(20) {
  background-color: hsla(300deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(300deg);
  transition-delay: 10;
}
.f .s:nth-child(21) {
  background-color: hsla(315deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(315deg);
  transition-delay: 10.5;
}
.f .s:nth-child(22) {
  background-color: hsla(330deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(330deg);
  transition-delay: 11;
}
.f .s:nth-child(23) {
  background-color: hsla(345deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(345deg);
  transition-delay: 11.5;
}
.f .s:nth-child(24) {
  background-color: hsla(0deg, 50%, 50%, 0.8);
  transform: translate(100px) rotate(360deg);
  transition-delay: 12;
}/*# sourceMappingURL=30_20220228220846.css.map */